<template>
  <div class="publicformview">
     	
			
			<div class="bottomTop" style="margin-top: 10px;" v-if='blockType!=1'>
			  <el-button type="primary" size="mini" @click="gotoxuncha">巡查</el-button>
			</div>
    <el-form label-width='107px' :inline="true" :model="listQuery" :disabled='blockType==3' size="mini" ref="searchForm" style="margin-top: 20px;">
     
			<el-row :gutter="10">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="完损等级：" prop="conditionlevel">
              <el-select v-model="listQuery.conditionlevel" @change="wansunChange" clearable>
                <div v-for="(item,index) in wansundengjiList" :key="index">
                  <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="新旧程度：" prop="newoldlevel">
              <el-select v-model="listQuery.newoldlevel" @change="xinjiuChange" value-key="detail" clearable>
                <div v-for="(item,index) in xinjiuchengduList" :key="index">
                  <el-option :label="item.detail" :value="item" :key="index"></el-option>
                </div>
              </el-select>
							<el-tooltip class="item" effect="dark" content="选择“新旧程度”，“折旧率”变为不同的数值" placement="top">
										<i class="el-icon-warning" style="margin-left:5px"></i>
							</el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="折旧率： " prop="newolddepreciationrate">
              <el-input disabled v-model="formattedRate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地基基础：" prop="contionfondation">
              <el-select v-model="listQuery.contionfondation" clearable>
                <div v-for="(item,index) in dijijichuList" :key="index">
                  <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="6">
          <el-form-item label="承重构件：" prop="conditionbearingwall">
            <el-select v-model="listQuery.conditionbearingwall" clearable>
              <div v-for="(item,index) in chengzhonggoujianList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="非承重墙：" prop="conditionnonbearingwall">
            <el-select v-model="listQuery.conditionnonbearingwall" clearable>
              <div v-for="(item,index) in feichengzhongqiangList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="外抹灰：" prop="conditionoutermortar">
            <el-select v-model="listQuery.conditionoutermortar" clearable>
              <div v-for="(item,index) in waimohuiList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内抹灰：" prop="conditioninnermorter">
            <el-select v-model="listQuery.conditioninnermorter" clearable>
              <div v-for="(item,index) in meimohuiList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼地面：" prop="conditionfloor">
            <el-select v-model="listQuery.conditionfloor" clearable>
              <div v-for="(item,index) in loudimianList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="屋面：" prop="conditionroomwall">
            <el-select v-model="listQuery.conditionroomwall" clearable>
              <div v-for="(item,index) in wumianList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="顶棚：" prop="conditionceiling">
            <el-select v-model="listQuery.conditionceiling" clearable>
              <div v-for="(item,index) in dingpengList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="门窗：" prop="conditiondoorwin">
            <el-select v-model="listQuery.conditiondoorwin" clearable>
              <div v-for="(item,index) in menchuangList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备：" prop="conditionfacility">
            <el-select v-model="listQuery.conditionfacility" clearable>
              <div v-for="(item,index) in shebeiList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="健康状况：" prop="conditiontext">
            <el-input v-model="listQuery.conditiontext" style="width: 300px" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="fangwuList">
        <div class="fangwuText">屋顶</div>
        <el-col :span="6">
          <el-form-item label="屋面材料：" prop="roofmaterial">
            <el-select v-model="listQuery.roofmaterial" clearable>
              <div v-for="(item,index) in wumiancailiaoList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="屋架结构：" prop="rooftruss">
            <el-select v-model="listQuery.rooftruss" clearable>
              <div v-for="(item,index) in wujiajiegouList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
      </div>
      <div class="fangwuList">
        <div class="fangwuText">楼层</div>
        <el-col :span="6">
          <el-form-item label="楼板：" prop="floorslab">
            <el-select v-model="listQuery.floorslab" clearable>
              <div v-for="(item,index) in loubanList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼梯：" prop="floorstairs">
            <el-select v-model="listQuery.floorstairs" clearable>
              <div v-for="(item,index) in loutiList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="走廊：" prop="floorcorridor">
            <el-select v-model="listQuery.floorcorridor" clearable>
              <div v-for="(item,index) in zoulangList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
      </div>
      <div class="fangwuList">
        <div class="fangwuText">墙身</div>
        <el-col :span="6">
          <el-form-item label="砌砖材料：" prop="wallmaterail">
            <el-select v-model="listQuery.wallmaterail" clearable>
              <div v-for="(item,index) in qiezhuancailiaoList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="外墙面：" prop="walloutsidematerial">
            <el-select v-model="listQuery.walloutsidematerial" clearable>
              <div v-for="(item,index) in waiqiangmianList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="墙厚(cm)：" prop="wallthickinside">
            内
            <el-input type="number" v-model="listQuery.wallthickinside"></el-input>

          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item prop="wallthickoutside">
            外
            <el-input type="number" v-model="listQuery.wallthickoutside"></el-input>

          </el-form-item>
        </el-col>
      </div>
      <div class="fangwuList">
        <div class="fangwuText">门窗</div>
        <el-col :span="6">
          <el-form-item label="材料：" prop="doorwinmaterial">
            <el-select v-model="listQuery.doorwinmaterial" clearable>
              <div v-for="(item,index) in cailiaoList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="槽数：" prop="doorwingrooveno">
            <el-input type="number" v-model="listQuery.doorwingrooveno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纱窗：" prop="doorwinscreen">
            <el-select v-model="listQuery.doorwinscreen" clearable>
              <div v-for="(item,index) in shachuangList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
      </div>
      <div class="fangwuList">
        <div class="fangwuText">其他部分</div>
        <el-col :span="6">
          <el-form-item label="顶棚：" prop="otherstructureroof">
            <el-select v-model="listQuery.otherstructureroof" clearable>
              <div v-for="(item,index) in qitadingpengList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供热：" prop="providerwarm">
            <el-select v-model="listQuery.providerwarm" clearable>
              <div v-for="(item,index) in qitagongreList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
      </div>
      <div class="fangwuList">
        <div class="fangwuText">其他情况</div>
        <el-col :span="6">
          <el-form-item label="电梯：" prop="elevatorcount">
            <el-input type="number" v-model="listQuery.elevatorcount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="水泵：" prop="pumpcount">
            <el-input type="number" v-model="listQuery.pumpcount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="水箱：" prop="wartertankcount">
            <el-input type="number" v-model="listQuery.wartertankcount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="典型建筑：" prop="modelbuilding">
            <el-select v-model="listQuery.modelbuilding" clearable>
              <div v-for="(item,index) in dianxingjianzuList" :key="index">
                <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" prop="housestatememo">
            <el-input v-model="listQuery.housestatememo" style="width: 300px;" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div class="bottomTop" style="margin-top: 10px;" v-if='blockType!=3'>
      <el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addBlockDetail, blockDetail, updBlockDetail } from '@/api/industry'
export default {
  props: {
    blockType: String,
    blockid: String
  },
  name: 'fangwuxianzhuang',
  data() {
    return {
      listQuery: {
        conditionlevel: '',
        newoldlevel: '',
        newolddepreciationrate: '',
        contionfondation: '',
        conditionfloor: '',
        conditionbearingwall: '',
        conditionroomwall: '',
        conditionnonbearingwall: '',
        conditionceiling: '',
        conditionoutermortar: '',
        conditioninnermorter: '',
        conditiondoorwin: '',
        conditionfacility: '',
        conditiontext: '',
        roofmaterial: '',
        rooftruss: '',
        floorslab: '',
        floorstairs: '',
        floorcorridor: '',
        wallmaterail: '',
        walloutsidematerial: '',
        wallthickinside: '',
        wallthickoutside: '',
        doorwinmaterial: '',
        doorwingrooveno: '',
        doorwinscreen: '',
        otherstructureroof: '',
        providerwarm: '',
        housestatememo: '',
        elevatorcount: '',
        wartertankcount: '',
        pumpcount: '',
        modelbuilding: ''
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      listLoading: false,
      dialogVisible: false,
      isChanquan: true,
      type: 1,
      // 完损等级
      wansundengjiList: [],
      // 新旧程度
      xinjiuchengduList: [],
      // 地基基础
      dijijichuList: [],
      // 楼地面
      loudimianList: [],
      // 承重构件
      chengzhonggoujianList: [],
      // 屋面
      wumianList: [],
      // 非承重墙
      feichengzhongqiangList: [],
      // 顶棚
      dingpengList: [],
      // 外抹灰
      waimohuiList: [],
      // 内抹灰
      meimohuiList: [],
      // 门窗
      menchuangList: [],
      // 设备
      shebeiList: [],
      // 屋面材料
      wumiancailiaoList: [],
      // 屋架结构
      wujiajiegouList: [],
      // 楼板
      loubanList: [],
      // 楼梯
      loutiList: [],
      // 走廊
      zoulangList: [],
      // 砌砖材料
      qiezhuancailiaoList: [],
      // 外墙面
      waiqiangmianList: [],
      // 材料
      cailiaoList: [],
      // 纱窗
      shachuangList: [],
      // 其他顶棚
      qitadingpengList: [],
      // 其他供热
      qitagongreList: [],
      // 典型建筑
      dianxingjianzuList: [],
			blockno:''
    }
  },

  computed: {
    formattedRate() {
      // 处理可能为null或undefined的情况，乘以100后保留两位小数，再加上百分号
      if (
        this.listQuery.newolddepreciationrate === null ||
        this.listQuery.newolddepreciationrate === undefined
      ) {
        return ''
      }
      return this.listQuery.newolddepreciationrate * 100 + '%'
    }
  },

  mounted() {
    // 遍历字典
    this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
    this.chanyeList.forEach((item, index) => {
      if (item.classname == '完损等级') {
        this.wansundengjiList = item.classmidList
      } else if (item.classname == '房屋现状') {
        item.classmidList.forEach((it, idx) => {
          if (it.classmid == '地基基础') {
            this.dijijichuList = it.classdetailList
          } else if (it.classmid == '楼地面') {
            this.loudimianList = it.classdetailList
          } else if (it.classmid == '承重构件') {
            this.chengzhonggoujianList = it.classdetailList
          } else if (it.classmid == '屋面') {
            this.wumianList = it.classdetailList
          } else if (it.classmid == '非承重墙') {
            this.feichengzhongqiangList = it.classdetailList
          } else if (it.classmid == '顶棚') {
            this.dingpengList = it.classdetailList
          } else if (it.classmid == '外抹灰') {
            this.waimohuiList = it.classdetailList
          } else if (it.classmid == '内抹灰') {
            this.meimohuiList = it.classdetailList
          } else if (it.classmid == '门窗') {
            this.menchuangList = it.classdetailList
          } else if (it.classmid == '设备') {
            this.shebeiList = it.classdetailList
          }
        })
      } else if (item.classname == '建筑构造情况') {
        item.classmidList.forEach((it, idx) => {
          if (it.classmid == '屋顶--屋面材料') {
            this.wumiancailiaoList = it.classdetailList
          } else if (it.classmid == '屋顶--屋架形式') {
            this.wujiajiegouList = it.classdetailList
          } else if (it.classmid == '楼层--楼板') {
            this.loubanList = it.classdetailList
          } else if (it.classmid == '楼层--楼梯') {
            this.loutiList = it.classdetailList
          } else if (it.classmid == '楼层--外走廊') {
            this.zoulangList = it.classdetailList
          } else if (it.classmid == '墙身--砌体材料') {
            this.qiezhuancailiaoList = it.classdetailList
          } else if (it.classmid == '墙身--外墙面') {
            this.waiqiangmianList = it.classdetailList
          } else if (it.classmid == '门窗--材料') {
            this.cailiaoList = it.classdetailList
          } else if (it.classmid == '门窗--纱窗') {
            this.shachuangList = it.classdetailList
          } else if (it.classmid == '其他--顶棚') {
            this.qitadingpengList = it.classdetailList
          } else if (it.classmid == '其他--供热') {
            this.qitagongreList = it.classdetailList
          } else if (it.classmid == '典型建筑') {
            this.dianxingjianzuList = it.classdetailList
          }
        })
      }
    })

    if (this.blockid) {
      let data = {
        BlockID: this.blockid
      }
      blockDetail(data).then((res) => {
        console.log(res)
        this.listQuery = res.data
				this.blockno = res.data.blockno
      })
    }
    if (localStorage.getItem('fangwuxianzhuang')) {
      this.listQuery = JSON.parse(localStorage.getItem('fangwuxianzhuang'))
    }
  },

  methods: {
    // 完损等级选择
    wansunChange(value) {
      this.chanyeList.forEach((item, index) => {
        if (item.classname == '完损等级') {
          item.classmidList.forEach((it, idx) => {
            if (value == '完好' && it.classmid == '完好') {
              this.xinjiuchengduList = it.classdetailList
            } else if (value == '基本完好' && it.classmid == '基本完好') {
              this.xinjiuchengduList = it.classdetailList
            } else if (value == '一般损坏' && it.classmid == '一般损坏') {
              this.xinjiuchengduList = it.classdetailList
            } else if (value == '严重损坏' && it.classmid == '严重损坏') {
              this.xinjiuchengduList = it.classdetailList
            } else if (value == '危房' && it.classmid == '危房') {
              this.xinjiuchengduList = it.classdetailList
            }
          })
        }
      })
    },
    //新旧
    xinjiuChange(e) {
      console.log(e)
      this.listQuery.newolddepreciationrate = e.value
      this.listQuery.newoldlevel = e.detail
    },
    resetForm(val) {
      console.log('1')
      this.$refs[val].resetFields()
    },
    handleAddUser() {
      console.log(localStorage.getItem('blockid'))
      if (!this.blockid&&!localStorage.getItem('blockid')) return this.$message('请先填写产权情况')
      let data = {
        conditionlevel: this.listQuery.conditionlevel,
        newoldlevel: this.listQuery.newoldlevel,
        newolddepreciationrate: this.listQuery.newolddepreciationrate,
        contionfondation: this.listQuery.contionfondation,
        conditionfloor: this.listQuery.conditionfloor,
        conditionbearingwall: this.listQuery.conditionbearingwall,
        conditionroomwall: this.listQuery.conditionroomwall,
        conditionnonbearingwall: this.listQuery.conditionnonbearingwall,
        conditionceiling: this.listQuery.conditionceiling,
        conditionoutermortar: this.listQuery.conditionoutermortar,
        conditioninnermorter: this.listQuery.conditioninnermorter,
        conditiondoorwin: this.listQuery.conditiondoorwin,
        conditionfacility: this.listQuery.conditionfacility,
        conditiontext: this.listQuery.conditiontext,
        roofmaterial: this.listQuery.roofmaterial,
        rooftruss: this.listQuery.rooftruss,
        floorslab: this.listQuery.floorslab,
        floorstairs: this.listQuery.floorstairs,
        floorcorridor: this.listQuery.floorcorridor,
        wallmaterail: this.listQuery.wallmaterail,
        walloutsidematerial: this.listQuery.walloutsidematerial,
        wallthickinside: this.listQuery.wallthickinside,
        wallthickoutside: this.listQuery.wallthickoutside,
        doorwinmaterial: this.listQuery.doorwinmaterial,
        doorwingrooveno: this.listQuery.doorwingrooveno,
        doorwinscreen: this.listQuery.doorwinscreen,
        otherstructureroof: this.listQuery.otherstructureroof,
        providerwarm: this.listQuery.providerwarm,
        housestatememo: this.listQuery.housestatememo,
        elevatorcount: this.listQuery.elevatorcount,
        wartertankcount: this.listQuery.wartertankcount,
        pumpcount: this.listQuery.pumpcount,
        modelbuilding: this.listQuery.modelbuilding,
        blockid: this.blockid?this.blockid:localStorage.getItem('blockid')
      }
      localStorage.setItem('fangwuxianzhuang', JSON.stringify(data))
      if (this.blockType == 2 || this.blockType == 4) {
        updBlockDetail(data).then((res) => {
          console.log(res)
          this.$message(res.message)
        })
      } else {
        addBlockDetail(data).then((res) => {
          console.log(res)
          this.$message(res.message)
        })
      }
    },
		gotoxuncha(){
			this.$router.push({
			  path: '/safe/fangwuanquankancha/xuncharenwuliebiao',
			  query: { blockno: this.blockno}
			})
		},
    returns() {
      this.$router.go(-1)
    },
    // 选择类型
    selectButton(type) {
      this.type = type
    }
  },
  beforeDestroy() {
    let data = {
      conditionlevel: this.listQuery.conditionlevel,
      newoldlevel: this.listQuery.newoldlevel,
      newolddepreciationrate: this.listQuery.newolddepreciationrate,
      contionfondation: this.listQuery.contionfondation,
      conditionfloor: this.listQuery.conditionfloor,
      conditionbearingwall: this.listQuery.conditionbearingwall,
      conditionroomwall: this.listQuery.conditionroomwall,
      conditionnonbearingwall: this.listQuery.conditionnonbearingwall,
      conditionceiling: this.listQuery.conditionceiling,
      conditionoutermortar: this.listQuery.conditionoutermortar,
      conditioninnermorter: this.listQuery.conditioninnermorter,
      conditiondoorwin: this.listQuery.conditiondoorwin,
      conditionfacility: this.listQuery.conditionfacility,
      conditiontext: this.listQuery.conditiontext,
      roofmaterial: this.listQuery.roofmaterial,
      rooftruss: this.listQuery.rooftruss,
      floorslab: this.listQuery.floorslab,
      floorstairs: this.listQuery.floorstairs,
      floorcorridor: this.listQuery.floorcorridor,
      wallmaterail: this.listQuery.wallmaterail,
      walloutsidematerial: this.listQuery.walloutsidematerial,
      wallthickinside: this.listQuery.wallthickinside,
      wallthickoutside: this.listQuery.wallthickoutside,
      doorwinmaterial: this.listQuery.doorwinmaterial,
      doorwingrooveno: this.listQuery.doorwingrooveno,
      doorwinscreen: this.listQuery.doorwinscreen,
      otherstructureroof: this.listQuery.otherstructureroof,
      providerwarm: this.listQuery.providerwarm,
      housestatememo: this.listQuery.housestatememo,
      elevatorcount: this.listQuery.elevatorcount,
      wartertankcount: this.listQuery.wartertankcount,
      pumpcount: this.listQuery.pumpcount,
      modelbuilding: this.listQuery.modelbuilding,
      blockid: localStorage.getItem('blockid')
    }
    localStorage.setItem('fangwuxianzhuang', JSON.stringify(data))
  }
}
</script>

<style scoped>
.headTop {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .xinxi {
    display: flex;
    width: 800px;
  }
}

.el-form-item {
  justify-content: start !important;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-date-picker {
  width: 180px;
}

.bottomTop {
  width: 100%;
  display: flex;
  justify-content: end;
}

.tabButton {
  background: #eff2f7;
  color: #333333;
  border: none;
}

.fangwuList {
  width: 100%;
  background-color: #f5f5f5;
  margin: 3px auto 0;
  overflow: hidden;
}

.fangwuText {
  font-weight: bold;
  font-size: 16px;
  color: #008c93;
  margin-top: 20px;
  margin-left: 26px;
}
</style>